---
target: Umo Editor
keywords: Umo Editor,Tiptap,富文本编辑器,文档编辑器,文档编辑,协同办公,开源编辑器,国产编辑器
description: Umo Editor 是一个基于 Vue3 和 Tiptap 的本土化开源文档编辑器，专为国人用户设计。它提供了强大的文档编辑能力和 AI 创作功能，支持分页模式、Markdown 语法、富文本编辑、多种格式的节点插入、页面样式设置、文档导出与打印等功能。此外，Umo Editor 还支持自定义扩展、多语言设置和暗色主题。
---

## Tiptap 实例

Umo Editor 基于[Tiptap](https://tiptap.dev/)实现，并对外提供了一些[方法](./methods)，更多的 Tiptap 编辑器信息可以先通过 `getEditor()` 或 `useEditor()` 获取 Tiptap 编辑器实例，进而获取 Tiptap 编辑器的状态信息和调用 Tiptap 的方法等。

Tiptap 开发文档：https://tiptap.dev/docs/editor/getting-started/overview

### 如何使用获取 Tiptap 编辑器实例

```vue
<template>
  <umo-editor
    ref="editorRef"
    v-bind="options"
  />
</template>
 
<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { UmoEditor } from '@umoteam/editor';

  const editorRef = ref(null);
  const tiptapEditor = ref({});
  const options = ref({
    // 配置项
    // ...
  })

  onMounted(() => {
    tiptapEditor.value = editorRef.value.useEditor();
    console.log(tiptapEditor);

    // 或者
    // tiptapEditor.value = editorRef.value.getEditor();
    // console.log(tiptapEditor.value);
  })

</script>
```

通过 Tiptap 编辑器提供的配置和方法，可以更灵活地控制编辑器的功能，同时也可以实现一些自定义功能。